<template>
  <div class="home-channel-main over">
    <div class="channel-login fl tcenter">
      <div class="login-icon">
        <img v-if="userInfo" @click="routeToPath('/member/main','mall')" class="login-icon-avatar circle cursor" :src="URL.PIC+userInfo.avatar">
        <img v-else class="circle" src="@/assets/images/home/default-user.png">
      </div>
      <div class="login-text" v-if="userInfo">
        您好！{{userInfo.nickName?userInfo.nickName:userInfo.username}}
      </div>
      <div class="login-text" v-else>
        您好！请 <a @click="routeToPath('/login','mall')">登录</a> / <a @click="routeToPath('/login/register','mall')">注册</a>
      </div>
    </div>
    <ul class="channel-tags fl">
      <li v-for="item in tags" class="tcenter fl">
        <div class="tags-icon">
          <img :src="item.icon">
        </div>
        <div class="tags-text">{{ item.name }}</div>
      </li>
    </ul>
    <div class="channel-message fl">
      <div class="message-number">
        <span v-for="i in factoryNum">{{i}}</span>
        <div class="message-text">
          家云工厂已入驻
        </div>
      </div>
      <div class="message-note">
        <MarqueeRollUp
          :marqueeList="list"
          speed="300"
          autoPlay="5000"
          height="40"
          width="400"
          bg="#F9F9F9"
          color="#333"
          fontSize="14">
        </MarqueeRollUp>
      </div>
    </div>
  </div>
</template>

<script>
import MarqueeRollUp from '@/components/Marquee'
import { getMacketList } from '@/api/home'
import { getFactoryNum } from '@/api/factory'
export default {
  data() {
    return {
      tags: [{
        icon: require('~/assets/images/home/tag1.png'),
        name: '交易安全'
      },{
        icon: require('~/assets/images/home/tag2.png'),
        name: '品类齐全'
      },{
        icon: require('~/assets/images/home/tag3.png'),
        name: '周边市场'
      },{
        icon: require('~/assets/images/home/tag4.png'),
        name: '实名商家'
      }],
      list: [],
      userInfo: this.getUserInfo(),
      factoryNum: '',
    }
  },
  components: {
    MarqueeRollUp,
  },
  created() {
    this.getMacketList();
    this.getFactoryNum();
  },
  methods: {
    getMacketList() {
      getMacketList().then(res=>{
        this.list = res.data;
      })
    },
    getFactoryNum() {
      getFactoryNum().then(res=>{
        const num = String(res.data).split('')
        for (var i = 0; i < num.length; i++) {
          this.factoryNum += num[i]+','
        }
        this.factoryNum = this.factoryNum.split(',');
        this.factoryNum.splice(this.factoryNum.length-1,1);
      })

    }
  }
}
</script>

<style lang="scss" scoped>
.home-channel-main{
  width: 1200px;
  margin: 0 auto;
  position: relative;
  margin-top: -60px;
  background-color: #fff;
  box-shadow: 0 2px 26px rgba(0,0,0,0.07);
  height: 100px;
  border-radius: 10px;
  z-index: 2;
  .channel-login{
    width: 240px;
    padding-top: 13px;
    color: #888888;
    font-size: 14px;
    .login-icon{
      margin-bottom: 6px;
      .login-icon-avatar{
        width: 52px;
        height: 52px;
      }
    }
  }
  .channel-tags{
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    margin: 20px 0;
    padding-right: 38px;
    li{
      width: 70px;
      color: #888888;
      padding-left: 38px;
      .tags-icon{
        margin-bottom: 10px;
        img{
          vertical-align: bottom;
          -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
        }
      }
      // &:hover img{
      //   -webkit-animation-name: bounceIn;
      //   animation-name: bounceIn;
      // }
    }
  }
  .channel-message{
    padding: 10px 34px;
    overflow: hidden;
    .message-number{
      overflow: hidden;
      margin-bottom: 10px;
      line-height: 22px;
      color: #333333;
    }
    span{
      display: inline-block;
      background-color: #EEEEEE;
      color: #255B8B;
      font-size: 24px;
      font-weight: 600;
      line-height: 28px;
      padding: 1px 3px;
      margin-right: 3px;
      border-radius: 5px;
    }
    .message-text{
      margin-top: -8px;
      display: inline-block;
      vertical-align: middle;
      margin-left: 3px;
      color: #888888;
    }
    .message-note{
      width: 400px;
      height: 40px;
      line-height: 40px;
      background: #F9F9F9;
      color: #888888;
      .item{
        padding-left: 20px;
        background: url('/assets/images/home/note.png') left no-repeat;
      }
    }
  }
}
</style>
